<template>
	<div class="member-list">
		<list-title :data="header"></list-title>
		<div class="search">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="注册时间">
					<el-date-picker
					v-model="searchForm.addTime"
					type="daterange"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="searchForm.state" placeholder="状态">
						<el-option label="禁用" value="1"></el-option>
						<el-option label="启用" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="searchForm.flag">
						<el-option label="用户名" :value="1"></el-option>
						<el-option label="昵称" :value="2"></el-option>
						<el-option label="电话" :value="3"></el-option>
						<el-option label="邮箱" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchForm.key"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<list-table :list="memberList" :tableLoading="tableLoading" :footer="true" :pagination="pagination">
			<template v-slot:data>
				<el-table-column prop="username" label="会员名称"></el-table-column>
				<el-table-column prop="phone" label="手机"></el-table-column>
				<el-table-column prop="amount" label="账户金额"></el-table-column>
				<el-table-column prop="currIntegral" label="可用积分"></el-table-column>
				<el-table-column label="当前状态">
					<template slot-scope="scope">
						<el-radio-group size="mini" v-model="scope.row.state" @change="changeState(scope.$index, scope.row)">
							<el-radio-button label=1>锁定</el-radio-button>
							<el-radio-button label=2>启用</el-radio-button>
						</el-radio-group>
						<!-- <el-switch v-model="scope.row.state" @change="changeState(scope.$index, scope.row)"></el-switch> -->
					</template>
				</el-table-column>
				<el-table-column prop="addTime" label="注册时间"></el-table-column>
				<el-table-column label="操作" width="200">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {filterEmpty} from "static/js/common.js"
export default {
	data() {
		return {
			comid: '',
			/*头部数据*/
			header: {
				title: '会员列表',
				reload: true,
				buttons: [
					{
						title: '添加会员',
						type: 'primary',
						pathName: 'pc/company/company/manage/member/Member',
					}
				]
			},
			/*搜索*/
			searchForm: {
				flag: 1,
				key: this.$route.query.key,
				state: this.$route.query.state,
				addTime: (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:'',
			},
			memberList: [
				{
					// id: 1,
					// username: 'user',
					// nickname: '昵称',
					// phone: '手机',
					// amount: 999,
					// currIntegral: 100,
					// state: 2,
					// addTime: '2019-09-09 08:08:08',
				},
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {
		/*取出comid，如果没有则跳转到 企业列表 */
		this.comid = this.$sessionStorage.get('comid')
		if(this.comid == null){
			this.$router.push({ name: "pc/company/company/CompanyList"})
		}
		/*获取所有会员数据*/
		this.getMemberList()
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getMemberList()
			/*点击navbar的时候，路由产生变化*/
			this.searchForm.flag = (this.$route.query.flag)?this.$route.query.flag:1
			this.searchForm.key = this.$route.query.key
			this.searchForm.state = this.$route.query.state
			this.searchForm.addTime = (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:''
		}
	},
	methods: {
		/*获取会员列表*/
		getMemberList: function(){
			// this.$baseURL('http://super.ac.comdd')
			this.$post(this.$api.memberList, this.$route.query).then(res => {
				// console.log(res);
				if(res.data.code == 10007){//后台提示需要登录
					this.$cookie.remove('isLogin');//刪除cookie登录信息
					this.reload();
				}
				if(res.data.code === 0){
					if(res.data.data.list != undefined){
						this.memberList = []
						Object.keys(res.data.data.list).forEach((k) => {
							this.memberList.push ({
								id: res.data.data.list[k].memberid,
								username: res.data.data.list[k].username,
								nickname: res.data.data.list[k].nickname,
								phone: res.data.data.list[k].phone,
								amount: res.data.data.list[k].amount,
								currIntegral: res.data.data.list[k].curr_integral,
								state: res.data.data.list[k].state,
								addTime: res.data.data.list[k].add_time
							});
							this.pagination = res.data.data.pageInfo
						})
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*编辑企业*/
    	handleEdit(index, row) {
			// console.log(row.id);
			this.$router.push({ name: 'pc/company/company/manage/member/Member', query: {id: row.id}})
		},
		/*搜索提交*/
		searchSubmit: function(){
			let query = filterEmpty(JSON.parse(JSON.stringify(this.searchForm)))
			if(query.addTime != undefined){
				query = Object.assign({begin_time: query['addTime'][0], end_time: query['addTime'][1]}, query)
				delete query['addTime']
			}
			this.$router.push({query})
		},
		/*列表中直接修改状态*/
		changeState(index, row){
			this.$post(this.$api.setMemberState, {
				'Member': {
					'id': row.id,
					'state': row.state,
					'comid': this.comid
				}
			}).then(res => {
				if(res.data.code == 10007){//后台提示需要登录
					this.$cookie.remove('isLogin');//刪除cookie登录信息
					this.reload();
				}
				if(res.data.code == 0){
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'success'
					});
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		}
	},
	computed: {

	}
};
</script>

<style lang="stylus" scoped>
.member-list
	.search
		margin-top: 10px
		.el-form-item--small.el-form-item
			margin-bottom: 0px
</style>